<template>
  <div class="index-page">

    <!-- 顶部信息 -->
    <nav-top @changeEdit="changeEdit" :userInfo="userCache"/>

    <!-- 内容区 -->
    <div class="nav-content">
      <!-- 左侧栏 -->
      <div class="home-content-left show-in-pc" :style="{ width: 180 +'px'}">
        <nav-menu 
          @menuClick="menuClick" 
          @deleteMenu="deleteMenu"
          @addNewMenu="addNewMenu"
          :topList="asyncMenuTopList" 
          :itemList="asyncMenuItemList" 
          :isEdit="isEdit"/>
      </div>

      <div class="home-content-right" v-if="activeItem">
        <right-search-content v-if="activeItem.id == '100'" :asyncBlogList="asyncBlogList" :asyncBlogUserList="asyncBlogUserList"/>
        <right-dash-board v-if="activeItem.id == '101'"/>
        <right-content
          ref="rightContent" 
          v-else-if="activeItem && activeItem.id != '100' && activeItem.id != '101'" 
          :parent="activeItem" 
          :isEdit="isEdit"/>
      </div>
      <div class="home-content-right" v-else>
        <loading/>
      </div>
    </div>
  </div>
</template>

<script>
import Api from"@/utils/api.js"
import LocalStorage from "@/utils/localStorage.js"
import NavMenu from "@/components/NavMenu.vue"
import Loading from "@/components/Loading.vue"
import NavTop from "@/components/NavTop.vue"
import RightSearchContent from "~/components/right/searchcontent/index.vue"
import RightContent from "~/components/right/content/index.vue"
import RightDashBoard from "~/components/right/dashboard/index.vue"

export default {
  head () {
    return {
      title: this.mateData.title,
      meta:[
        {hid:'description',name:'description',content: this.mateData.description},
        {hid:'keywords',name:'keywords',content: this.mateData.keywords},
        {name:'360-site-verification',content: "b9dba0f28a60c744624bf7909b3f32a9"}
      ]
    }
  },

  async asyncData({$axios, app, route, params }) {
    try {
      var mateData = {title:'',keywords:'', description:''}

      var userCache = await $axios.post(Api.USER_CACHE)
      if(userCache && userCache.userName ){
          mateData.title = userCache.userName
      } else {
        mateData.title = '个人笔记记录'
        mateData.keywords = "个人笔记记录"
        mateData.description = "个人笔记记录"
      }

      var res1 = await $axios.post(Api.RECOMMEND_BLOG, {refresh : "0"})
      var res2 = await $axios.post(Api.RECOMMEND_BLOG_INFO, {refresh : "0"})
      var res3 = await $axios.post(Api.USER_MENU_LIST)

      // 分组顶部与用户菜单
      var menuTopList = res3.filter(item => Number(item.id) < 200)
      var menuItemList = res3.filter(item => Number(item.id) > 200)

      return { 
        mateData: mateData,
        userCache: userCache,
        asyncBlogList: res1,
        asyncBlogUserList: res2,
        asyncMenuTopList: menuTopList,
        asyncMenuItemList: menuItemList
      }
    } catch (e) {
      app.context.error({statusCode: e.code, message: e.message })
    }
  },

  fetch({ app, route, params }) {
  },
  
  created() {
    if (process.client){
      // 日志
      if(this.userCache && this.userCache.userName ){
        console.log(
          `%c ${this.userCache.userName} %c Welcome to HuiYong %c`,
          'background:#35495e ; padding: 2px; border-radius: 3px 0 0 3px;  color: #fff;',
          'background:#41b883 ; padding: 2px; border-radius: 0 3px 3px 0;  color: #fff;',
          'background:transparent'
        )
      }
    }
  },

  components:{
    NavTop,
    Loading,
    NavMenu,
    RightSearchContent,
    RightDashBoard,
    RightContent
  },

  data(){
    return{
      isEdit: false,
      activeItem: ''
    }
  },

  methods: {
    menuClick(item){
      this.activeItem = item
      LocalStorage.setItem("USER_HOME_ACTIVE_ITEM", item)

      if(item.id != '100' && item.id != '101'){
        setTimeout(() => {
          this.$refs.rightContent.refresh()
        }, 100);
      }
    },

    // 编辑
    changeEdit(isEdit){
      this.isEdit = isEdit
    },

    // 新增菜单
    addNewMenu(item){
      var isEdit = false
      this.asyncMenuItemList.forEach((e, index) =>{
        if(e.id == item.id){
          this.asyncMenuItemList[index] = item
          isEdit = true
        }
      })

      if(!isEdit){
        this.asyncMenuItemList.push(item)
      }
    },

    // 删除菜单
    deleteMenu(item){
      this.$confirm('确定删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {          
        this.$axios.post(Api.USER_MENU_DELETE, {id : item.id}).then(_ =>{
          this.asyncMenuItemList = this.asyncMenuItemList.filter(e => e.id !== item.id)
        }).catch(res =>{
          this.$message.warning(res.message);
        })
      }).catch(() => {});
    },
  }
}
</script>

<style lang="less">
@import './index.less';
</style>